Navigator.push এবং Navigator.pop এর ব্যবহার

Flutter এ Navigator.push এবং Navigator.pop হলো স্ক্রিন বা পৃষ্ঠার মধ্যে নেভিগেট করার দুটি প্রধান পদ্ধতি। এগুলো Navigator ক্লাসের অংশ, যা Flutter অ্যাপ্লিকেশনের বিভিন্ন স্ক্রিনের মধ্যে নেভিগেশনের জন্য ব্যবহৃত হয়। নিচে Navigator.push এবং Navigator.pop এর বিস্তারিত ব্যাখ্যা এবং উদাহরণ দেয়া হলো।

Navigator.push:

Navigator.push একটি নতুন স্ক্রিন বা Route কে বর্তমান স্ট্যাকের উপরে যোগ করে এবং ব্যবহারকারীকে নতুন স্ক্রিনে নিয়ে যায়। এটি একটি asynchronous পদ্ধতি, যা Future রিটার্ন করে। সাধারণত এটি যখন ব্যবহার করা হয়, তখন ব্যবহারকারী নতুন স্ক্রিনে যেতে পারেন এবং আগের স্ক্রিন ব্যাক বাটন বা অন্য কোনো উপায়ে ফিরতে পারেন।

ব্যবহারের ধরন:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NewScreen()),
);

• context: বর্তমান Widget এর কন্টেক্সট।
• MaterialPageRoute: এটি একটি Route তৈরি করে যা একটি নতুন স্ক্রিন (Widget) প্রদর্শন করে। builder এর মাধ্যমে নতুন Widget (স্ক্রিন) নির্দিষ্ট করা হয়।

উদাহরণ:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigator Push Example',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text('Welcome to the Second Screen!'),
      ),
    );
  }
}

• HomeScreen এ একটি বাটন রয়েছে যা চাপলে SecondScreen এ নেভিগেট করে।
• Navigator.push ব্যবহার করে SecondScreen কে বর্তমান Route স্ট্যাকের উপরে যোগ করা হয়েছে।

Navigator.pop:

Navigator.pop ব্যবহার করে বর্তমান স্ক্রিন থেকে আগের স্ক্রিনে ফিরে যাওয়া যায়। এটি Route স্ট্যাক থেকে বর্তমান স্ক্রিন সরিয়ে আগের স্ক্রিন প্রদর্শন করে। এটি সাধারণত ব্যাক বাটন ক্লিক করলে বা অন্য কোনো UI ইন্টারঅ্যাকশনের মাধ্যমে ব্যবহৃত হয়।

ব্যবহারের ধরন:

Navigator.pop(context);

• context: বর্তমান Widget এর কন্টেক্সট।

উদাহরণ:

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back to Home Screen'),
        ),
      ),
    );
  }
}

• SecondScreen এ একটি বাটন রয়েছে, যা চাপলে Navigator.pop ব্যবহার করে আগের স্ক্রিনে (HomeScreen) ফিরে যায়।

Navigator.push এবং Navigator.pop এর ব্যবহারিক ক্ষেত্রে:

ডেটা পাস করা (Navigator.push এবং Navigator.pop):

Flutter এ Navigator.push এবং Navigator.pop এর মাধ্যমে স্ক্রিনের মধ্যে ডেটা পাস করা যায়। উদাহরণস্বরূপ:

ডেটা পাঠানো (Navigator.push):

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondScreen(data: 'Hello from Home Screen'),
  ),
);

ডেটা গ্রহণ করা (SecondScreen):

class SecondScreen extends StatelessWidget {
  final String data;

  SecondScreen({required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text(data),
      ),
    );
  }
}

ডেটা ফেরত পাঠানো (Navigator.pop):

Navigator.pop(context, 'Data from Second Screen');

ডেটা রিসিভ করা (HomeScreen):

onPressed: () async {
  final result = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondScreen()),
  );

  print(result); // Output: Data from Second Screen
},

Navigator.push এবং Navigator.pop এর সুবিধা:

• স্ক্রিন পরিবর্তন: মাল্টি-পেজ অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে, যেখানে ব্যবহারকারী এক স্ক্রিন থেকে অন্য স্ক্রিনে নেভিগেট করতে পারেন।
• স্ট্যাক ম্যানেজমেন্ট: Navigator স্ট্যাকের মতো কাজ করে, যা UI ট্রানজিশন এবং ব্যাক নেভিগেশনে সহায়তা করে।
• ডেটা পাসিং: স্ক্রিনের মধ্যে ডেটা আদানপ্রদান করা যায়, যা ডাইনামিক কন্টেন্ট প্রদর্শনের জন্য প্রয়োজনীয়।

Navigator.push এবং Navigator.pop ব্যবহার করে আপনি Flutter এ সহজেই একটি মাল্টি-পেজ অ্যাপ্লিকেশন তৈরি করতে পারবেন, যা ব্যবহারকারীর ইন্টারঅ্যাকশন অনুযায়ী ডাইনামিক এবং ফ্লেক্সিবল UI প্রদান করে।